<template>
  <div
    class="shelf-item"
    :class="{ 'shelf-item-shadow': data.type === 1 || data.type === 2 }"
    @click="onItemClick"
  >
    <!-- 动态组件渲染 -->
    <component
      class="shelf-item-comp"
      :class="{ 'is-edit': isEditMode && data.type === 2 }"
      :is="item"
      :data="data"
    ></component>
    <div
      class="icon-selected"
      :class="{ 'is-selected': data.selected }"
      v-show="isEditMode && data.type === 1"
    ></div>
  </div>
</template>

<script>
import ShelfItemBook from './ShelfItemBook.vue';
import ShelfItemCategory from './ShelfItemCategory.vue';
import ShelfItemAdd from './ShelfItemAdd.vue';

import { storeShelfMixin } from '@/utils/mixin';
import { gotoStoreHome } from '@/utils/store';

export default {
  mixins: [storeShelfMixin],
  props: {
    data: Object,
  },
  computed: {
    // 计算组件
    item() {
      return this.data.type === 1
        ? this.book
        : this.data.type === 2
        ? this.category
        : this.add;
    },
  },
  data() {
    return {
      /* 三个按类别(默认,按进度,按购买)渲染的子组件 */
      book: ShelfItemBook,
      category: ShelfItemCategory,
      add: ShelfItemAdd,
      copyData: this.data, // 复制data数据
    };
  },
  methods: {
    onItemClick() {
      // 电子书处于编辑状态
      if (this.isEditMode) {
        this.copyData.selected = !this.copyData.selected; // 改变选中状态

        // 电子书处于被选中状态
        if (this.copyData.selected) {
          /*           console.log(this.shelfSelected[this.shelfSelected.length - 1]);
          console.log(this.copyData); */
          this.shelfSelected.pushWithoutDuplicate(this.data);
        }
        // 电子书没有处于被选中状态
        else {
          /*           console.log(this.shelfSelected[this.shelfSelected.length - 1]);
          console.log(this.copyData); */
          this.setShelfSelected(
            // 从被选中图书的数组(this.shelfSelected)里进行过滤
            this.shelfSelected.filter((item) => item.id !== this.copyData.id)
          );
        }
      }
      // 电子书没有处于编辑状态
      else {
        // type 1
        if (this.data.type === 1) {
          this.showBookDetail(this.data);
        }
        // type 2
        else if (this.data.type === 2) {
          this.$router.push({
            path: '/store/category',
            query: {
              title: this.data.title,
            },
          });
        }
        // type 3
        else {
          gotoStoreHome(this);
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.shelf-item {
  position: relative;
  width: 100%;
  height: 100%;

  &.shelf-item-shadow {
    box-shadow: px2rem(2) px2rem(2) px2rem(10) px2rem(10)
      rgba(200, 200, 200, 0.3);
  }

  .shelf-item-comp {
    opacity: 1;
    &.is-edit {
      opacity: 50%;
    }
  }

  .icon-selected {
    position: absolute;
    bottom: px2rem(2);
    right: px2rem(2);
    font-size: px2rem(18);
    color: rgba(0, 0, 0, 0.4);

    &.is-selected {
      color: $color-blue;
    }
  }
}
</style>
